<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script  type="module">
		//这个页面知识负责把webgl。html里边的js进行封装
		
		import initShader from "./js/createShader.js"
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl")  


		let vertexShader=`
			void main(){
				gl_Position=vec4(0.0,0.0,0.0,1.0);
				gl_PointSize=10.0;
			}
		`;
		let fragementShader=`
			void main(){
				gl_FragColor=vec4(0.0,1.0,1.0,1.0);
			} 
		`;  

		initShader(gl,vertexShader,fragementShader); 

		//定义清空后的颜色值
		gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
		gl.clear(gl.COLOR_BUFFER_BIT); 

		gl.drawArrays(gl.POINTS,0,1);
	</script>
</html>